<template>
  <div class="page-container">
    <div class="flex-end">
      <el-button v-if="!noContent" type="primary" @click="addNew()">Add Service</el-button>
    </div>
    <div class="el-list plan-modules-wrapper">
      <el-row v-loading="dataListLoading" :gutter="40">
        <el-col v-if="noContent">
          <el-empty description=" ">
            <el-button type="primary" @click="addNew()">Add Service</el-button>
          </el-empty>
        </el-col>
        <template v-if="!noContent">
          <el-col :span="6" v-for="item in dataList" :key="item.id">
            <el-card shadow="nerver" :body-style="{ padding: '0px' }" class="mt40 relative">
              <div class="module-item">
                <div class="module-desc">
                  <div class="title">
                    <span>{{ item.name }}</span>
                    <span class="code">{{ item.country }}</span>
                  </div>
                  <div class="date">
                    update at
                    <span>{{ localDateFormat(item.updateTime) }}</span>
                  </div>
                </div>
              </div>
              <ul class="el-card-actions">
                <li style="width: 50%" @click="deleteHandle(item.id)">
                  <!-- <span>删除</span> -->
                  <i class="el-icon-delete"></i>
                </li>
                <li style="width: 50%" @click="updateHandle(item.id)">
                  <!-- <span>修改</span> -->
                  <i class="el-icon-edit"></i>
                </li>
              </ul>
            </el-card>
          </el-col>
        </template>
      </el-row>
    </div>
    <el-pagination
      hide-on-single-page
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="current"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
import { dateFormat } from "@/utils";
export default {
  data() {
    return {
      dataList: [],
      current: 1,
      pageSize: 6,
      totalCount: 0,
      dataListLoading: false,
      dataListSelections: [],
    };
  },
  activated() {
    this.getDataList();
  },
  computed: {
    noContent() {
      return this.totalCount === 0;
    },
  },
  methods: {
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.current = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.current = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    /* 格式化 */
    statusFormat(row, column, cellValue) {
      if (cellValue === 0) {
        return (
          <el-tag size="samll" type="danger">
            禁用
          </el-tag>
        );
      } else {
        return <el-tag size="samll">正常</el-tag>;
      }
    },
    localDateFormat(datetime) {
      if (datetime) {
        return dateFormat(new Date(datetime.replace(/-/g, "/")), "yyyy-MM-dd");
      }
      return "";
    },
    /* 格式化 */
    //添加新套餐
    addNew() {
      this.$router.push("/sys/pkg/module/add");
    },
    //数据请求
    async getDataList(current) {
      this.dataListLoading = true;
      if (current) {
        this.current = current;
      }
      const params = {
        current: this.current,
        size: this.pageSize,
        "orders[0].asc": false,
        "orders[0].column": "id",
      };
      const { code, data } = await this.$http.get("/moduleManage/paging", {
        params,
      });
      if (code === 200) {
        this.dataList = data.records;
        this.totalCount = data.total;
      } else {
        this.dataList = [];
        this.totalCount = 0;
      }
      this.dataListLoading = false;
    },
    updateHandle(id) {
      this.$router.push(`/sys/pkg/module/${id}/edit`);
    },
    deleteHandle(id) {
      this.$confirm(`Delete this Service. Continue?`, "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      }).then(async () => {
        const { code, msg } = await this.$http.post(`/moduleManage/${id}/delete`);
        if (code === 200) {
          this.$message({
            message: "success",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getDataList();
            },
          });
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.plan-modules-wrapper {
  .module-item {
    padding: 18px 20px 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap;

    .module-desc {
      margin-left: 15px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      overflow: hidden;
      font-size: 16px;

      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        color: #333;

        .code {
          color: grey;
          margin-left: 10px;
        }
      }
      .date {
        margin: 24px 0 10px;
        font-size: 14px;
      }
    }
  }
}
</style>
